<template>
  <a-drawer :header="false" :footer="false" :width="504" v-model:visible="visible" unmountOnClose>
    <div class="w-full h-full overflow-y-scroll">
      <div class="w-full h-64px flex flex-row items-center px-24px box-border">
        <button @click="handleClose">
          <img src="@/assets/close2.png" alt="" class="w-24px h-24px" />
        </button>
        <div class="ml-8px text-24px font-bold text-#242633">确认订单</div>
      </div>
      <div class="w-full pt-24px px-24px box-border flex flex-row items-center">
        <div class="ant-image" style="width: 72px; height: 72px">
          <img
            class="ant-image-img w-72px h-72px rounded-50% transform hover:scale-110 transition"
            :src="userInfo?.header_img"
            style="height: 72px"
          />
        </div>
        <!---->
        <div class="ml-12px text-20px font-bold text-#242633">{{ userInfo?.nick_name }}</div>
      </div>
      <div
        class="mt-16px mx-24px w-auto h-[fit-content] p-12px box-border flex flex-col bg-#F5F7F8 rounded-16px"
      >
        <div
          class="w-full h-[fit-content] px-12px py-16px box-border flex flex-row justify-between items-center bg-white rounded-8px"
        >
          <div class="text-16px text-#8A8C99">订单服务:</div>
          <div class="text-16px font-bold text-#242633">{{ gameInfo?.name }}</div>
        </div>
        <div
          class="mt-12px w-full h-[fit-content] px-12px py-16px box-border flex flex-row justify-between items-center bg-white rounded-8px"
        >
          <div class="text-16px text-#8A8C99">价格:</div>
          <div class="flex items-center">
            <img class="w-28px h-28px" src="@/assets/money.png" alt="" />
            <div class="ml-4px text-16px font-bold text-[#FFBB33]">
              {{ selectSkill?.gold_coin }}/Game
            </div>
          </div>
        </div>
        <div
          class="mt-12px w-full h-[fit-content] px-12px py-16px box-border flex flex-row justify-between items-center bg-white rounded-8px"
        >
          <div class="text-16px text-#8A8C99">订单量:</div>
          <div class="flex items-center">
            <a-input-number
              v-model="orderNum"
              :style="{ width: '120px' }"
              :min="1"
              :max="10"
              :step="1"
              mode="button"
              size="small"
              class="input-demo"
            />
          </div>
        </div>
      </div>
      <div
        class="mt-18px mx-24px w-auto h-[fit-content] p-12px box-border flex flex-col bg-#F5F7F8 rounded-16px"
      >
        <div
          class="w-full h-[fit-content] px-12px py-16px box-border flex flex-row justify-between items-center bg-white rounded-8px"
        >
          <div class="text-16px text-#8A8C99">总价:</div>
          <div class="flex flex-row items-center">
            <img src="@/assets/money.png" alt="coin" class="w-16px h-16px" />
            <div class="ml-4px text-16px font-500 text-#242633">
              {{ selectSkill?.gold_coin * orderNum }}
            </div>
          </div>
        </div>
        <div
          class="mt-12px w-full h-[fit-content] px-12px py-16px box-border flex flex-row justify-between items-center bg-white rounded-8px"
        >
          <div class="text-16px text-#8A8C99">总量:</div>
          <div class="text-16px font-bold text-#242633">{{ orderNum }} x Game</div>
        </div>
      </div>
      <div class="mt-18px w-full px-24px box-border flex flex-row justify-end items-center">
        <div class="text-20px font-[500] text-#8A8C99">最终价格：</div>
        <img src="@/assets/money.png" alt="coin" class="ml-8px w-20px h-20px" />
        <div class="ml-4px text-20px font-500 text-#FFBB33">
          {{ selectSkill?.gold_coin * orderNum }}
        </div>
      </div>
      <div class="mt-24px mx-24px w-auto flex flex-row justify-center items-center">
        <button
          class="w-456px h-54px rounded-27px bg-gradient-to-r from-#7733FF to-#FF4DC4 text-20px font-bold text-white"
          @click="handleOk"
        >
          现在下单
        </button>
      </div>
    </div>
  </a-drawer>
</template>
<script setup>
import { ref, computed } from 'vue'
import { useVModel } from '@vueuse/core'
import { createOrder } from '@/api/order'
import { useUserStore } from '@/store'
import { Message } from '@arco-design/web-vue'

const { setGoldCoin } = useUserStore()
const props = defineProps(['visible', 'selectSkill', 'userInfo'])
const gameInfo = computed(() => {
  return props.selectSkill?.game || {}
})
const orderNum = ref(1)
const emits = defineEmits(['update:visible'])
const visible = useVModel(props, 'visible', emits)
const handleClose = () => {
  visible.value = false
}
const handleOk = () => {
  createOrder({
    user_id: props.userInfo.id,
    skill_id: props.selectSkill.id,
    number: orderNum.value
  }).then(() => {
    // console.log(res)
    Message.success('下单成功！')
    visible.value = false
    setGoldCoin(-props.selectSkill.gold_coin * orderNum.value)
  })
}
</script>
<style lang="less" scoped>
:global(.arco-drawer-body) {
  padding: 0 !important;
}
:deep(.arco-input-wrapper) {
  border: 0;
  > input {
    text-align: center !important;
  }
}
</style>
